import { useIntersectionObserver } from '@vueuse/core'

export default {
  // 指令名称
  name: 'lazy',
  // 图片懒加载：用户滚动到可视区域时才加载图片
  mounted(el) {
    // el：被指令绑定的元素，可以用来直接操作 DOM。
    // 1. 拿到当前 img 元素的 src 地址
    const imgSrc = el.src
    // 2. 把 img 元素的 src 地址替换为一张默认图片
    el.src = ''
    // 3. 监听 img 元素是否进入可视区域
    const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
      // 4. 如果进入可视区域，把 img 元素的 src 地址替换为真实的图片地址
      if (isIntersecting) {
        el.src = imgSrc
        // 5. 停止监听
        stop()
      }
    })
  }
}
